<template>
  <div>
    <el-container>
      <el-aside :width="asideWidth" style=" min-height: 100vh; background-color:#001526">
        <div
          style="height: 60px; background-color:#001526; color: white; display: flex; align-items: center; justify-content: center;">
          <img src="@/assets/1.jpg" alt="" style="width: 50px;">
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001526"
          text-color="#a6adb4" style="border: none;" :default-active="$route.path">
          <el-menu-item index="/home">
            <i class="el-icon-house"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu index="/user" @Click="open(index)">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/user">用户信息</el-menu-item>
            <el-menu-item index="/admin">管理员信息</el-menu-item>
          </el-submenu>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item index="/sendNovel">发布文章</el-menu-item>
            <el-menu-item index="/novelList">文章列表</el-menu-item>
          </el-submenu>
          <el-menu-item index="/albums" >
            <i class="el-icon-camera"></i>
            <span slot="title">相册管理</span>
          </el-menu-item> 
          <el-menu-item index="/commend" >
            <i class="el-icon-camera"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>  
          <el-menu-item index="/message" >
            <i class="el-icon-camera"></i>
            <span slot="title">留言管理</span>
          </el-menu-item>     
          <el-menu-item index="/logs">
            <i class="el-icon-s-tools"></i>
            <span slot="title">系统日志</span>
          </el-menu-item>
          <el-menu-item index="/notice">
            <i class="el-icon-s-tools"></i>
            <span slot="title">系统公告</span>
          </el-menu-item>  
          <el-menu-item index="/test">
            <i class="el-icon-s-tools"></i>
            <span slot="title">系统公告</span>
          </el-menu-item>
        </el-menu>

      </el-aside>

      <el-container>
        <el-header>
          <i :class="collapseIcon" style="width: 40px; font-size: 26px; margin-right: 4px; cursor: pointer;"
            @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path: $route.path}">{{ $route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: end;">
            <el-dropdown placement="bottom" style="margin-right: 10px; cursor: pointer;">
              <div style="display: flex; align-items: center;">
                <img :src="user.image||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
                  style="width: 50px; border-radius: 50%;">
                <span style="font-size:14px; margin-left: 5px; font-weight: bold; ">{{ user.name }}</span>
              </div>

              <el-dropdown-menu>
                <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
          <el-main>
            <router-view @update:user="updateUser" />
          </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>



/* import axios from 'axios'; */

export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false,
      asideWidth:'200px',
      collapseIcon:'el-icon-s-fold',
      user:JSON.parse(localStorage.getItem('user'||'{}')),
      image:' '
    }

  },
  mounted(){
    
  
   
  },
  methods:{
    exit(){
      localStorage.removeItem('user')
      this.$router.push('/login')
    },
    handleCollapse(){
      this.isCollapse=!this.isCollapse
      this.asideWidth=this.isCollapse? '64px' :'200px'
      this.collapseIcon=this.isCollapse? 'el-icon-s-unfold' :'el-icon-s-fold'
    },
     updateUser(user){
        this.user=JSON.parse(JSON.stringify(user))
      } 
  }
}
</script>

<style>

.el-menu--inline{
  background-color: #000c17!important;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.el-menu-item:hover,.el-submenu__title:hover{
  color: #fff !important;
}

.el-menu-item.is-active{
  background-color: #1890ff !important;
  color: #fff;
  border-radius: 5px;
  margin: 4px;
}

.el-tooltip.el-icon-house{
  margin-right: 4px!important;
}

.el-submenu__icon-arrow{
  margin-top: -5px;
}
.el-submenu__title:hover i{
  color: #fff !important;
}

.el-menu-item{
/*   height: 40px;
  line-height: 40px; */
  margin:4px !important;
}
.el-menu--collapse>.el-menu-item [class^=el-icon-] {
  padding-right: 6px !important;
}
.el-aside{
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,35);
  overflow: hidden;
}

.el-header{
  box-shadow: 2px 0 6px rgba(0,21,41,35);
  display: flex;
  align-items: center;
  position: sticky;
  overflow: hidden;
}

.el-main{
  margin-top: 10px;
  height: calc(100vh - 70px);
  
}


</style>

